<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" inline>
      <el-form-item :label="$t('Department')" prop="deptId">
        <department-select v-model="queryParams.deptId" style="width: 200px" />
      </el-form-item>
      <el-form-item :label="$t('Name')" prop="name">
        <el-input v-model="queryParams.name" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          {{ $t("Search") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{
          $t("Reset")
        }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">{{ $t("Add") }}</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="queryPage"></right-toolbar>
    </el-row>

    <el-table ref="table" v-loading="loading" :data="list">
      <el-table-column label="#" type="index" width="45" align="right">
        <template slot-scope="scope">
          <span>{{
            (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('Name')" align="left" prop="name" min-width="150" />
      <el-table-column :label="$t('Version')" align="left" prop="version" width="150" />
      <el-table-column :label="$t('Serial')" align="left" prop="serial" width="280" />
      <el-table-column :label="$t('Ip')" align="left" prop="ip" width="150" />
      <el-table-column :label="$t('Mark')" align="left" prop="mark" min-width="150" />
      <el-table-column :label="$t('Status')" align="left" prop="status" width="100">
        <template slot-scope="{row}">
          {{ statusText[row.status] }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('CreateTime')" align="left" prop="createTime" width="160" />
      <el-table-column :label="$t('RegisterTime')" align="left" prop="registerTime" width="160" />
      <el-table-column :label="$t('Operate')" align="center" width="120" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button v-if="row.status === 1" size="mini" type="text" @click="handleReset(row)">{{ $t('Reset') }}
          </el-button>
          <el-button v-if="row.status === 0" size="mini" type="text" @click="handleDelete(row)">{{ $t('Delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="queryPage" />

    <el-dialog title="创建软件许可" :visible.sync="formVisible" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="120px">
        <el-form-item :label="$t('Department')" prop="deptId">
          <department-select v-model="form.deptId" :placeholder="$t('device.InsertDepartment')" />
        </el-form-item>
        <el-form-item :label="$t('Count')" prop="cout">
          <el-input-number v-model="form.count" :placeholder="$t('device.InsertName')" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="formSubmit">{{ $t("OK") }}</el-button>
        <el-button @click="formCancel">{{ $t("Cancel") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import DataEntity from "@/components/DataEntity/DataEntity";
  import DepartmentSelect from "@/views/system/components/DepartmentSelect.vue";
  import appLicenseAPI from '@/api/app/license'
  export default {
    name: 'AppLicensePage',
    mixins: [DataEntity],
    components: {
      DepartmentSelect
    },
    data() {
      return {
        statusText: ['未注册', '已注册'],
        currentAPI: appLicenseAPI,
        currentBaseURL: '/app/license',
        currentCode: 'license',
        queryParams: {
          deptId: null,
          name: null,
          version: null
        },
        rules: {
          deptId: [{
            required: true
          }],
          count: [{
            required: true
          }]
        }
      }
    },
    methods: {
      handleReset(row) {
        const vm = this
        this.$confirm("确认重置许可？", "操作提示", {}).then(() => {
          appLicenseAPI.reset(row.id).then(res => {
            vm.$message({
              type: 'success',
              message: '重置许可成功'
            })
          })
        })
      }
    }
  }

</script>
